<template>
    <div class="test-test" style="margin: 0; padding: 0; width: 100%;">
        <el-row class="toolbar">
            <el-col :span="8" :offset="8" >
                <el-input placeholder="请输入图书名称" v-model="searchBn"  class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="searchBookName()"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-menu :offset="2" class="el-menu-demo" style="background-color: inherit" mode="horizontal">
            <el-menu-item index="1" @click="handleSearch('new-book')">新书推荐</el-menu-item>
            <el-menu-item index="2" @click="handleSearch('borrow-book')">借书排行</el-menu-item>
            <el-menu-item index="3" @click="handleSearch('comment-book')">书评排行</el-menu-item>
        </el-menu>

        <div style="height: 480px; overflow: auto">
            <ul>
                <li class="card-item" v-for="(item, idx) in listData" @click="toBookDetail(item)">
                    <div class="card-i-wrap" style="margin: 0; padding: 0;text-align: center;">

                    <!--    <img class="b-img" src="../../../../resources/images/yinying.jpg"/>-->
                        <template v-if="item.imageId !== null">
                            <img class="b-img" :src="'../../../../resources/rest-images/'+item.imageId"/>
                        </template>
                        <template v-else>
                            <img class="b-img" src="../../../../resources/images/yinying.jpg"/>
                        </template>
                        <div class="b-price">￥{{item.price}}</div>
                        <div class="b-name">{{item.bookName}}</div>
                        <div class="b-comment-count">{{item.commentNum}}条评价</div>
                    </div>
                </li>
            </ul>
        </div>
        <el-row  style="margin: 20px 0">
            <el-col :span="10" :offset="14">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="filter.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import  { getBookInfos, remove } from '../../../module/admin/book/bookInfo';
    import { Message } from 'element-ui';
    export default {
        data () {
            return {
                listData: [],
                search:{
                    key: '',
                    value:'sort',
                },
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 0,
                currentPage4: 1,
                searchBn:''
            }
        },
        mounted () {
            let _this = this;
            getBookInfos(_this);
        },
        methods: {
            searchBookName() {
                this.search.key = 'bookName';
                this.search.value = this.searchBn;
                console.log('==============>>>',this.search)
                getBookInfos(this)
            },
            toBookDetail(book) {
                this.$router.push({
                    name:'reader-book-detail',
                    params: {
                        book: book
                    }
                })
            },
            handleSearch(val) {
                this.search.value = 'sort';
                this.search.key = val;
                getBookInfos(this)
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                getBookInfos(this);
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                getBookInfos(this);
            },

        }
    }
</script>

<style>
    body {
        font-family: Helvetica, sans-serif;
    }
    .toolbar {
        margin: 20px 0;
    }
    .search {
        width: 300px;
    }
    ul {
        list-style: none;
    }

    .card-item {
        width: 240px;
        height: 340px;
        float: left;
        position: relative;
        z-index: 1;
        _display: inline;
        margin-right: 40px;
        margin-top: 10px;
    }
    .card-item:hover {
        cursor:pointer;
        width: 238px;
        height: 338px;
        border:1px solid #D4D4D4;

    }
    .card-item .card-i-wrap {
        width: 220px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        background: #fff;
        padding: 38px 9px 10px;
    }
    .b-img {
        width: 200px;
        height: 200px;
        text-align: center;
    }
</style>
